<template>
  <wd-action-sheet v-model="showModel" :z-index="199">
    <view class="share-action-sheet">
      <view class="nth2">
        <view class="item active" @click="onShareLink">
          <image class="img" src="/static/images/share-link.png" />
          <view>分享链接</view>
        </view>
        <view class="border" />
        <view class="item active" @click="onSharePoster">
          <image class="img" src="/static/images/share-img.png" />
          <view>分享海报</view>
        </view>
      </view>
      <view class="custom-button button" @click="showModel = false">关闭</view>
    </view>
  </wd-action-sheet>

  <ShareLink v-if="showShareLink" :isCustomNav="isCustomNav" @closeMode="showShareLink = false" />
  <SharePoster
    v-if="showSharePoster"
    :value="showSharePoster"
    :isCustomNav="isCustomNav"
    @closeMode="showSharePoster = false"
  />
</template>

<script setup lang="ts">
import ShareLink from './ShareLink.vue'
import SharePoster from './SharePoster.vue'

defineOptions({ name: 'ShareMode' })
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 是否自定义导航栏
  isCustomNav: {
    type: Boolean,
    default: false,
  },
})
const emits = defineEmits(['update:modelValue'])

const showModel = ref(false)
watch(
  () => props.modelValue,
  (n) => {
    showModel.value = n
  },
  { immediate: true },
)
watch(showModel, (n) => {
  emits('update:modelValue', n)
})

// 链接相关
const showShareLink = ref(false)
function onShareLink() {
  showModel.value = false
  showShareLink.value = true
}

// 海报相关
const showSharePoster = ref(false)
// 开始生成二维码
function onSharePoster() {
  showSharePoster.value = true
}
</script>

<style lang="scss" scoped>
.share-action-sheet {
  padding: 60rpx 30rpx 30rpx;

  & > .nth2 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 10px;

    .item {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 27rpx;
      color: var(--color4);

      .img {
        width: 108rpx;
        height: 108rpx;
        margin-bottom: 28rpx;
      }
    }

    .border {
      width: 1px;
      height: 160rpx;
      background-color: var(--bgc2);
      transform: scaleX(0.5);
    }
  }

  .button {
    margin-top: 80rpx;
  }
}
.qrcode-img {
  position: absolute;
  top: 0;
  left: -500px;
  width: 74px;
  height: 74px;
}
</style>
